<template>
  <div class="app-container">
    <div style="margin-bottom: 4px;">
      <!-- 搜索筛选 -->
      <el-form :inline="true" :model="searchForm" class="user-search">
        <el-form-item label="搜索：">
          <el-button type="primary" size="mini" @click="searchDate()">搜索</el-button>
        </el-form-item>
        <el-form-item label="">
          <el-input size="small" v-model="searchForm.mobile" placeholder="输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input size="small" v-model="searchForm.coupon" placeholder="输入优惠码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-col :span="8" class="text-c">
              <el-radio v-model="searchForm.type" label="cust">注册</el-radio>
            </el-col>
            <el-col :span="8" class="text-c">
              <el-radio v-model="searchForm.type" label="quota">询价</el-radio>
            </el-col>
            <el-col :span="8" class="text-c">
              <el-radio v-model="searchForm.type" label="order">订单</el-radio>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
        <el-select size="small" v-model="searchForm.dateType" placeholder="全部">
          <el-option v-for="type in dateTime" :label="type.key" :value="type.value" :key="type.value"></el-option>
        </el-select>
        </el-form-item>
      </el-form>
    </div>

    <el-table ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>

     <el-table-column label="手机号">
       <template slot-scope="scope">
         {{scope.row.mobile}}
       </template>
     </el-table-column>
      <el-table-column label="优惠码">
        <template slot-scope="scope">
          {{scope.row.coupon}}
        </template>
      </el-table-column>
      <el-table-column width="160" label="注册时间">
        <template slot-scope="scope">
          {{scope.row.resgister}}
        </template>
      </el-table-column>
      <el-table-column label="报价记录列表">
        <template slot-scope="scope">
          <el-button size="mini" @click="showQuota(scope.$index, scope.row)">报价记录</el-button>
        </template>
      </el-table-column>
      <el-table-column label="历史报价记录数">
        <template slot-scope="scope">
          {{scope.row.quotaTotal}}
        </template>
      </el-table-column>
      <el-table-column width="160" label="最新一次报价时间">
        <template slot-scope="scope">
          {{scope.row.quotaUpdate}}
        </template>
      </el-table-column>
      <el-table-column label="待支付列表">
        <template slot-scope="scope">
          <el-button size="mini" @click="showOrder(scope.$index, scope.row)">待支付记录</el-button>
        </template>
      </el-table-column>
      <el-table-column label="待支付订单数">
        <template slot-scope="scope">
          {{scope.row.waitTotal}}
        </template>
      </el-table-column>
      <el-table-column width="180" label="最近一次支付创建时间">
        <template slot-scope="scope">
          {{scope.row.lastPayDate}}
        </template>
      </el-table-column>
      <el-table-column label="去支付次数">
        <template slot-scope="scope">
          {{scope.row.payNum}}
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          {{scope.row.remarks}}
        </template>
      </el-table-column>
      <!--<el-table-column label="操作">
      </el-table-column>-->
    </el-table>
    <div style="margin-top: 4px;">
      <el-pagination background  layout="total, prev, pager, next" :page-size="pageSize" :current-page="pageNum" :total="pageTotal" @current-change="pageChange">
      </el-pagination>
    </div>
    <!-- 报价记录列表 -->
    <el-dialog title="报价列表" :visible.sync="quotaFormVisible" @click='closeDialog("quota")' width="80%" top="10vh">
      <el-table :data="quotaData" height="70vh">
        <el-table-column property="carName" label="车型" width="200"></el-table-column>
        <el-table-column property="mealName" label="套餐" width="150"></el-table-column>
        <el-table-column property="premium" label="单价" width="150"></el-table-column>
        <el-table-column property="createTime" label="报价时间" ></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 待支付订单列表 -->
    <el-dialog title="待支付列表" :visible.sync="orderFormVisible" @click='closeDialog("order")' width="80%" top="10vh">
      <el-table :data="orderData" height="70vh">
        <el-table-column property="orderNo" label="订单号" width="180"></el-table-column>
        <el-table-column property="carName" label="车辆名称" width="200"></el-table-column>
        <el-table-column property="mealName" label="套餐" width="150"></el-table-column>
        <el-table-column property="premium" label="单价" width="150"></el-table-column>
        <el-table-column property="payMoney" label="支付价" width="150"></el-table-column>
        <el-table-column property="createTime" label="报价时间" ></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <!--<el-button @click="dialogFormVisible = false">取 消</el-button>-->
        <!--<el-button type="primary" @click="submit()">确 定</el-button>-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { statis } from '@/api/statist'
  export default {
    data() {
      return {
        // name: 'statist',
        dateTime: [
          // { key: '全部', value: 0 },
          { key: '当天', value: 1 },
          { key: '近一个星期', value: 2 },
          { key: '近一个月', value: 3 },
          { key: '全部', value: 0 }
        ],
        pageNum: 1, // 当前页
        pageSize: 20, // 每页数
        pageTotal: 0, // 总页数
        list: null,
        startTime: null,
        listLoading: true,
        formLabelWidth: '100px',
        searchForm: {
          mobile: '',
          coupon: '',
          type: 'cust',
          dateType: 1
        },
        quotaFormVisible: false,
        quotaData: [],
        orderFormVisible: false,
        orderData: []
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        statis.getList(this.pageNum, this.pageSize, this.searchForm).then(response => {
          this.list = response.list
          this.listLoading = false
          this.pageTotal = response.total
          this.pageNum = response.pageNum
        })
      },
      searchDate() {
        this.fetchData()
      },
      submit() {
      },
      showQuota(index, row) {
        this.quotaFormVisible = true
        if (row != undefined && row != 'undefined') {
          // this.quotaData = row.quotations
          // if (this.searchForm.type != 'quota') {
          //   this.searchForm.dateType = 0
          // }
          statis.getQuotation(row.custId, 0).then(response => {
            this.quotaData = response.data
          }, err => {
            console.log(err)
          })
        }
      },
      showOrder(index, row) {
        this.orderFormVisible = true
        if (row != undefined && row != 'undefined') {
          // this.orderData = row.waitOrders
          // if (this.searchForm.type != 'order') {
          //   this.searchForm.dateType = 0
          // }
          statis.getUnOrders(row.mobile, 0).then(response => {
            this.orderData = response.data
          }, err => {
            console.log(err)
          })
        }
      },
      // 关闭编辑、增加弹出框
      closeDialog(dialog) {
        if (dialog == 'quota') {
          this.quotaFormVisible = false
        } else if (dialog == 'order') {
          this.orderFormVisible = false
        }
      },
      pageChange(val) {
        this.pageNum = val
        this.fetchData()
      }
    }
  }

</script>

<style scoped>

</style>
